<template>
	<view class="container">
		<topTitle backgroundColor="#fff">
			<template #content>
				<!-- 搜索框 -->
				<view class="nav-box">
					<view class="nav-top">
						<view class="nav-item" :class="currentNav == 0?'active':''"
						@click="currentNav = 0">正常</view>
						<view class="nav-item" :class="currentNav == 1?'active':''"
						@click="currentNav = 1">异常</view>
					</view>
				</view>
			</template>
		</topTitle>

		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="navbar-search">
				<view class="select-fit" @click.stop="">
					<text class="title">达人名称</text>
					<!-- <uni-combox :border="false" :candidates="candidates"
					style="width: 40rpx;"></uni-combox> -->
					<uni-data-select :localdata="range" @change="(e) => change(e, item)" :clear="false" placeholder=""
						emptyTips="暂无达人" :showValue="true" class="uni-data-select"></uni-data-select>
				</view>
				<view class="navbar-serach">
					<input class="navbar-search_text" type="text" confirm-type="搜索" v-model="keywords"
						placeholder="请搜索" @confirm="confirm" />
				</view>
			</view>
			<view class="icon-box" @click="sweepItClick">
				<image src="/static/logo.png" mode="aspectFit" class="search-qr"></image>
			</view>
		</view>

		<scroll-view scroll-y style="height: 0;flex: 1;">
			<view class="order-list">
				<view class="user-item" v-for="(user, index) in users" :key="index">
					<view class="user-info">
						<view class="user-avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="user-details">
							<text class="user-phone">{{ user.phone }}</text>
							<text class="user-id">{{ user.idInfo }}</text>
						</view>
					</view>
					<view class="user-amount">
						<text class="amount-value">
							<text class="yuan">￥</text>
							<text>{{ user.amount }}</text>
						</text>
						<text class="amount-desc">{{ user.amountDesc }}</text>
						<view class="disable-btn">{{ user.disableBtnText }}</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNav: 0,
				value: 1,
				keywords: '',
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

				users: [{
						avatar: '/static/logo.png', // 头像图片路径
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					},
					{
						avatar: '/static/logo.png',
						phone: '13333333331',
						idInfo: 'xxxxxxxx id xxxx',
						amount: '20.00',
						amountDesc: '累计结算',
						disableBtnText: '禁用'
					}
				]
			}
		},
		methods: {
			sweepItClick() {
				uni.navigateTo({
					url: "/pages/talent/sweepIt/sweepIt"
				})
			},
			change(e, item) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.nav-box {
		padding: 10rpx 0;
		height: 100%;
		box-sizing: border-box;

		.nav-top {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			background: #f4f4f4;
			border-radius: 10rpx;

			.nav-item {
				color: #000;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
			}

			.active {
				background-color: #0166ff;
				color: #fff;
				border-radius: 10rpx;
			}
		}
	}

	/* 搜索框 */
	.search-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20rpx;
		background-color: white;
		position: relative;
		box-sizing: border-box;
	}

	.icon-box {
		border-radius: 50%;
		width: 45rpx;
		height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.search-icon {
			width: 35rpx;
			height: 35rpx;
		}

		.search-qr {
			width: 35rpx;
			height: 35rpx;
		}
	}

	.navbar-search {
		display: flex;
		align-items: center;
		padding: 0 10px;
		width: 100%;
		height: 65rpx;
		border-radius: 50rpx;
		background-color: #f5f5f5;
		margin: 0 20rpx;
		flex: 1;

		.select-fit {
			background-color: #f5f5f5;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			position: relative;

			.title {
				color: #999;
				font-size: 24rpx;
				padding-right: 40rpx;

			}
		}

		.navbar-serach {
			margin: 0 20rpx;
			flex: 1;

			.navbar-search_text {
				width: 100%;
				font-size: 24rpx;
				color: #000;
			}
		}

	}

	.uni-data-select {
		position: absolute;
		right: 0;
		width: 100%;
	}

	.order-list {
		padding: 20rpx;
		

		.user-item {
			display: flex;
			align-items: start;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}

		.user-info {
			display: flex;
			align-items: center;
			flex: 1;
		}

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-details {
			flex: 1;
			display: flex;
			flex-direction: column;
			
		}

		.user-phone {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.user-id {
			font-size: 24rpx;
			color: #999;
			margin-top: 5rpx;
		}

		.user-amount {
			margin-right: 10rpx;
		}

		.amount-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			.yuan {
				font-size: 24rpx;
			}
		}

		.amount-desc {
			font-size: 28rpx;
			color: #999;
			display: block;
			margin-top: 5rpx;
		}

		.disable-btn {
			padding: 5rpx 15rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-radius: 40rpx;
			border: 1rpx solid #ff6b6b;
			color: #ff6b6b;
			font-size: 28rpx;
		}
	}
</style>